<template>
    <div>
        <h2>会员增加管理</h2>
        <table class="table table-bordered">
            <tr>
                <td>会员真实姓名</td>
                <td>
                    <input type="text" placeholder="请输入真实姓名" v-model="state.MemberName">
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" placeholder="请输入密码" v-model="state.MemberPwd">
                </td>
            </tr>
            <tr>
                <td>手机号</td>
                <td><input type="text" placeholder="请输入手机号" maxlength="11" v-model="state.MemberPhone"></td>
            </tr>
            <tr>
                <td>身份证号</td>
                <td>
                    <input type="text" placeholder="请输入身份证号码" maxlength="18" v-model="state.Card">
                </td>
            </tr>
            <tr>
                <td>会员图片</td>
                <td>
                    <input type="file" @change="photochange">
                    <img v-if="src!=''" :src="'https://localhost:7272'+src"  alt="" width="70" height="70">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="添加" @click="addMember">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { reactive,toRefs } from 'vue';
import { useRouter } from 'vue-router';
const router= useRouter()

const data=reactive({
    state:{
 "MemberName": "",
  "MemberPwd": "",
  "MemberPhone": "",
  "Card": "",
  "MemberPhoto": "",
  "State": 0,
  "IsDeleted": false
    },
    src:''
})

const {state,src}=toRefs(data)

const photochange=(e:any)=>{
    console.log(e);
    let formdata=new FormData();
    formdata.append('file',e.target.files[0]);
    axios({
        url:'/api/Upload',
        method:'post',
        data:formdata
    })
    .then(res=>{
        console.log(res);
        if(res.data.code==1002)
        {
            alert('上传的不是图片!');
            return;
        }
        else if(res.data.code==1001)
        {
            alert('上传的图片不能超过2M!');
            return;
        }
        else if(res.data.code=1000)
        {
            alert('上传成功!');
            state.value.MemberPhoto=res.data.data;
            src.value='https://localhost:7272'+res.data.data;
        }
        else{
            alert('上传失败!');
            return;
        }
    })
    .catch(err=>{
       console.log(err);         
    })
}


//添加
const addMember = () => {
    if(state.value.MemberName=='')
    {
        alert('会员真实姓名不能为空!');
            return;
    }
    if(state.value.MemberPwd=='')
    {
        alert('会员密码不能为空!');
            return;
    }
    if(state.value.MemberPhone=='')
    {
        alert('会员手机号不能为空!');
            return;
    }
    let reg=/^1[3-9]\d{9}$/;
    if(!reg.test(state.value.MemberPhone))
    {
        alert('手机号格式不正确!');
            return;
    }
    if(state.value.Card=='')
    {
        alert('会员身份证号不能为空!');
            return;
    }
    if(state.value.MemberPhoto=='')
    {
        alert('会员图片不能为空!');
            return;
    }
    axios({
        url: '/api/High/AddMember',
        method: 'post',
        data: state.value
    })
    .then(res => {
        console.log(res);
        if(res.data.data>0)
        {
            alert('添加成功!');
            router.push('/ShowMember')
        }
        else if(res.data.data==0)
        {
            alert('会员真实姓名不能重复添加!');
            return;
        }
        else{
            alert('添加失败!');
            return;
        }
        
    })
    .catch(err => {
        console.log(err);
    })
}
</script>

<style lang="scss" scoped>

</style>